<template>
    <view class="pub_page pub_check" :style="{ 'height': `100vh` }">
        <image v-if="standing == 'manage'" class="bg_img" mode="widthFix" :src="bg_manage" />
        <pub-head headerName="check" :headerConfig="headerConfig"></pub-head>
        <scroll-view scroll-y="true" class="page_box page_box_scroll"
            :style="{ 'height': `calc(100vh - ${headerHeight} - 10rpx)` }" @scrolltolower="scrollLower">
            <div class="real_div" v-if="errInfo && standing == 'manage'"
                @click.stop="$comFun.openWin('/pages/manage/contract')">
                <image class="icon" mode="aspectFit"
                    src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_36.png" />
                <div class="txt">{{ errInfo }}</div>
                <image class="close" @click.stop="errInfo = ''" mode="aspectFit"
                    src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_35.png" />
            </div>
            <div class="nums_div" v-if="standing == 'manage'">
                <div class="li">
                    <div class="p_4">账户资金 <div class="span" v-if="errInfo">未认证</div>
                    </div>
                </div>
                <div class="li">
                    <div class="p_1">总金额(元)
                        <!-- <image class="icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_17.png" /> -->
                    </div>
                    <div class="p_2">{{ userInfo.total_revenue || 0 }}</div>
                </div>
                <div class="li li_1">
                    <div class="p_1">已提现(元)</div>
                    <div class="p_3">{{ userInfo.withdrawn_amount || 0 }}</div>
                </div>
                <div class="li li_1">
                    <div class="p_1">待提现(元)</div>
                    <div class="p_3">{{ userInfo.pending_withdrawal_amount || 0 }}</div>
                </div>
            </div>

            <div class="lis_div">
                <div class="title">账单明细</div>
                <!-- <div class="tabs">
                    <div class="tab">
                        <picker :value="searchForm.orderTypeKey" :range="options.orderType" range-key="name"
                            @change="(data) => pickerChange('orderType', data)">
                            {{ searchForm.orderTypeName }}
                            <image class="icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_10.png" />
                        </picker>
                    </div>
                    <div class="tab">
                        <picker :value="searchFormorderGatewayKey" :range="options.orderGateway" range-key="name"
                            @change="(data) => pickerChange('orderGateway', data)">
                            {{ searchForm.orderGatewayName }}
                            <image class="icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_10.png" />
                        </picker>
                    </div>
                </div> -->
                <div class="info">
                    <div class="time">
                        <picker mode="date" fields="month" :end="searchForm.maxTime"
                            @change="(data) => pickerChange('year_month', data)">
                            {{ `${searchForm.timeArr[0]}年${searchForm.timeArr[1]}月` }}
                            <image class="icon" mode="aspectFit"
                                src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_16.png" />
                        </picker>
                    </div>
                    <div class="txt">{{ standing == 'manage' ? '收入' : '支出' }}¥{{ amountSum }}</div>
                </div>
                <z-paging ref="Zpaging" class="lis" v-model="list" @query="getList" :refresher-enabled="false"
                    :fixed="false" :use-page-scroll="true">
                    <!-- @click="$comFun.openWin('/pages/check/info', { openType: key == 1 ? 1 : 2 })" -->
                    <div class="li" v-for="(li, key) in list" :key="key">
                        <div class="p_1">{{ li.orderTypeTxt }}</div>
                        <div class="p_2">{{ li.amountTxt }}</div>
                        <div class="p_3">设备号：{{ li.deviceId || '' }}</div>
                        <div class="p_4" :class="li.statusTxt == '待支付' ? 'p_4_1' : ''">{{ li.statusTxt }}</div>
                        <div class="p_3">{{ li.createTime }}</div>
                    </div>
                </z-paging>
            </div>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                title: '账单',//标题栏内容
                title_color: '#fff',
                left_content: '',
            },
            headerHeight: getApp().globalData.headerHeight,
            standing: this.$store.state.standing,
            errInfo: '',
            userInfoLoad: false,
            userInfo: '',

            options: {
                orderType: [{ id: '', name: "全部类型" }, { id: 1, name: "充值" }, { id: 2, name: "退款" }],//全部类型-订单类型1：充值，2：退款
                orderGateway: [{ id: '', name: "全部支付" }, { id: 1, name: "微信支付" }, { id: 2, name: "支付宝支付" }, { id: 3, name: "管理员手动充值" }],//支付方式1：微信，2：支付宝，3：管理员手动充值
                status: [{ id: '', name: "全部状态" }, { id: 1, name: "待支付" }, { id: 2, name: "支付成功" }],//状态1：待支付，2：已完成
            },
            searchForm: {
                orderType: '',
                orderTypeKey: 0,
                orderTypeName: '全部类型',
                orderGateway: '',
                orderGatewayKey: 0,
                orderGatewayName: '全部支付',

                timeArr: [0, 0],
                maxTime: ''
            },

            amountSum: 0,
            list: [],

            bg_manage: '',
        };
    },
    onLoad(options) {
        var today = new Date(); // 获取当前日期时间
        let month = today.getMonth() + 1;
        this.searchForm.timeArr = [today.getFullYear(), `${month > 9 ? '' : '0'}${month}`];
        this.searchForm.maxTime = `${today.getFullYear()}-${month > 9 ? '' : '0'}${month}`;

        if (this.$store.state.standing == 'user') {
            this.headerConfig.title_color = '#000';
            this.headerConfig.header_color = '#fff';
            // 设置除支付宝小程序外其他平台 状态栏文字颜色
            this.$comFun.setUniNavigationBar();
            // 支付宝小程序设置状态栏文字颜色
            this.$comFun.setZfbNavigationBar();
        }
    },
    onShow() {
        this.getUserCenterInfo();
        if (this.$store.state.standing == 'manage') {
            const bg_manage = uni.getStorageSync('bg_manage');
            this.bg_manage = bg_manage || this.$store.state.bg_normal_manage;
        }
    },
    methods: {
        async getUserCenterInfo() {
            this.$comFun.openLoading();
            const res = await this.$request.get('mobile/user_center');
            // console.log(res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.userInfo = res.data;
                this.errInfo = this.userInfo.company_auth_status == 0 && this.userInfo.personal_auth_status == 0 ? '您还没有完成签约认证，前往认证开启自动提现' : '';
                // if (!this.userInfoLoad) {
                //     this.userInfoLoad = true;
                // }
                setTimeout(() => {
                    this.$comFun.openLoading();
                    this.$refs.Zpaging.reload()
                }, 400);
            }
        },
        scrollLower(e) {
            // console.log(e);
            this.$refs.Zpaging.doLoadMore();
        },
        pickerChange(type, e) {
            // console.log(type, e.detail.value);
            if (type == 'orderType') {
                this.searchForm.orderType = this.options.orderType[e.detail.value].id;
                this.searchForm.orderTypeKey = e.detail.value;
                this.searchForm.orderTypeName = this.options.orderType[e.detail.value].name;
            }
            if (type == 'orderGateway') {
                this.searchForm.orderGateway = this.options.orderGateway[e.detail.value].id;
                this.searchForm.orderGatewayKey = e.detail.value;
                this.searchForm.orderGatewayName = this.options.orderGateway[e.detail.value].name;
            }
            if (type == 'year_month') {
                this.searchForm.timeArr = e.detail.value.split("-");
            }

            this.$comFun.openLoading();
            this.$refs.Zpaging.reload()
        },
        async getList(pageNum, pageSize) {
            let data = {
                pageNum: pageNum,
                pageSize: pageSize,
            };
            let searchForm = {
                // orderType: this.searchForm.orderType,
                // orderGateway: this.searchForm.orderGateway,
            }
            if (this.searchForm.timeArr[0] != 0) {
                let year = this.searchForm.timeArr[0];
                let month = this.searchForm.timeArr[1];
                let day = new Date(year, month, 0).getDate();
                searchForm.startTime = `${year}-${month}-01 00:00:00`;
                searchForm.endTime = `${year}-${month}-${day} 23:59:59`;
            }

            if (this.standing == 'user') {
                data.userId = this.userInfo.userId;
            } else if (this.standing == 'manage') {
                data.managerId = this.userInfo.userId;
            }

            const res = await this.$request.get('/mobile/manager/order', {
                ...data,
                ...searchForm
            });
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                this.amountSum = res.data?.amountSum || 0;
                let list = res.data?.data || [];
                list.forEach(li => {
                    li.orderTypeTxt = li.orderType == 1 ? '管理员手动充值' : '管理员手动退款';
                    // let find_1 = this.options.orderGateway.find(oli => {
                    //     return oli.id == li.gateway;
                    // });
                    // li.gatewayTxt = find_1 ? find_1.name : '';
                    let find_2 = this.options.status.find(oli => {
                        return oli.id == li.status;
                    });
                    li.statusTxt = find_2 ? find_2.name : '';
                    li.amountTxt = `${li.orderType == 1 ? '+' : '-'}${li.amount}`;
                })
                this.$refs.Zpaging.complete(list);
            } else {
                this.$refs.Zpaging.complete(false);
            }
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/check.scss";
</style>
